<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>23-flex布局实例 -实用的网络结构布局</title>
<style type="text/css">
	.flex{
		display: flex
	}
	.warp{
		flex-wrap: wrap
	}
	.row{
		flex-direction: row
	}
	.column{
		flex-direction: column
	}
	.jc-start{
		justify-content: flex-start
	}
	.jc-end{
		justify-content: flex-end
	}
	.jc-center{
		justify-content: center
	}
	.jc-sb{
		justify-content: space-between
	}
	.jc-sa{
		justify-content: space-around
	}
	.ai-c{
		align-items: center
	}
	.ai-strar{
		align-items: flex-start
	}
	.ai-end{
		align-items: flex-end
	}
	.ai-str{
		align-items: stretch
	}
	.ac-c{
		align-content: center
	}
	.ac-strat{
		align-content: flex-start
	}
	.ac-end{
		align-content: space-between
	}
	.ac-sb{
		align-content: space-between
	}
	.ac-sa{
		align-content: space-around
	}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.box {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
}
.item {
	background-color: rgba(169,0,2,1.00);
	width: 251px;
	height: 151px;
	margin-right: 1px;
	margin-bottom: 21px;
}
</style>
</head>

<body>
	<div class="box flex jc-sb warp ac-strat">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	</div>
</body>
</html>
